<template>
  <view>
    <navbar>边框</navbar>
    <view :class="c_card">
      <view :class="c_title1">圆角</view>
	  <view class="b-b1"></view>
      <view class="c-999 mt-20">
        <text :class="c_strong">br-a(1~100):</text
        >{border-radius:(1-100)rpx auto;}/* 圆角大小 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">br50:</text>{border-radius:50%;}/*
        全圆角 */
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>
            box：class="w-100 h-50 <text class="fw-b c-red">br-25</text>"
          </view>
          <view class="w-150 h-150 bg-f1 dp-fc c-fff b-1 mt-20">
            <view class="w-100 h-50 dp-fc br-25 bg-999 b-2">box</view>
          </view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>
            box：class="w-100 h-100 <text class="fw-b c-red">br50</text>"
          </view>
          <view class="w-150 h-150 bg-f1 dp-fc c-fff b-1 mt-20">
            <view class="w-100 h-100 dp-fc br50 bg-999 b-2">box</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="c_card">
      <view :class="c_title1">边框宽度</view>
      <view>
        (默认边框颜色为bc-f1,如需修改请后接<text :class="c_strong"
          >bc-xx</text
        >)
      </view>
	  <view class="pb-32 b-b1"></view>
      <view class="c-999 mt-32">
        <text :class="c_strong">b-x(1~10):</text>{border:(1-10)rpx
        solid #f1f1f1;}/* 四边边框宽度 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">b-tx(1~10):</text
        >{border-top:(1-10)rpx solid #f1f1f1;}/* 上边框宽度 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">b-rx(1~10):</text
        >{border-right:(1-10)rpx solid #f1f1f1;}/* 右边框宽度 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">b-bx(1~10):</text
        >{border-bottom:(1-10)rpx solid #f1f1f1;}/* 下边框宽度 */
      </view>
      <view class="c-999 mt-20">
        <text :class="c_strong">b-lx(1~10):</text
        >{border-left:(1-10)rpx solid #f1f1f1;}/* 左边框宽度 */
      </view>
	   <view class="pb-32 b-b1"></view>
      <view class="mt-32">
        举例:
      </view>
      <view class="mt-20">
        <view>
          <view>box：class="<text class="fw-b c-red">b-5</text>"</view>
          <view class="w-200 h-50 dp-fc mt-20 b-5">box</view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>box：class="<text class="fw-b c-red">b-l5 bc-00f</text>"</view>
          <view class="w-200 h-50 dp-fc mt-20 b-l5 bc-00f">box</view>
        </view>
		<view class="pb-20 b-b1"></view>
        <view class="mt-20">
          <view>box：class="<text class="fw-b c-red">b-b2 bc-0f0</text>"</view>
          <view class="w-200 h-50 dp-fc mt-20 b-b2 bc-0f0">box</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		c_box:'w-500 h-250 p-all-20 fs-28 br-20'
	};
  }
}
</script>

<style lang="scss" scoped></style>
